<template>
  <div class="focus">
    <img src="/Pict/ValAddedBiz/Banner.jpg" alt="">
  </div>
  <div class="info">
    <div class="wrap">
        <div class="title">专业的设计团队，为您打造理想的家具环境</div>
        <div class="info-container">
         <div class="info-aside"><el-tree
         :props="props"
         :load="loadNode"
         lazy
         show-checkbox
         @check-change="handleCheckChange"/>
        </div>
        <div class="info-main">
            <div class="info-main-item" v-for="item in 4" :key="item">
                 <img src="/Pict/Cat.jpg" alt="">
                 <div class="inner">
                    <h3>每天都在废话</h3>
                    <span>首席家装设计师</span>
                    <span>擅长田园、美式风装修设计</span>
                    <span>对利比亚战损风设计有独到见解</span>
                    <div>擅长户型：拼盘雕刻、火锅白案</div>
                 </div>
            </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type Node from 'element-plus/es/components/tree/src/model/node'
  let count = 1
  
  interface Tree {
    name: string
  }
  
  const props = {
    label: 'name',
    children: 'zones',
  }
  
  const handleCheckChange = (
    data: Tree,
    checked: boolean,
    indeterminate: boolean
  ) => {
    console.log(data, checked, indeterminate)
  }
  
  const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
      return resolve([{ name: '风格' }, { name: '户型' },{ name: '设计师职级' }])
    }
    if (node.level > 3) return resolve([])
  
    let hasChild = false
    if (node.data.name === 'region1') {
      hasChild = true
    } else if (node.data.name === 'region2') {
      hasChild = false
    } else {
      hasChild = Math.random() > 0.5
    }
  
    setTimeout(() => {
      let data: Tree[] = []
      if (hasChild) {
        data = [
          {
            name: `zone${count++}`,
          },
          {
            name: `zone${count++}`,
          },
        ]
      } else {
        data = []
      }
  
      resolve(data)
    }, 500)
  }
  </script>
  

<style scoped>
.focus{
    width: 100%;
    height: 600px;
}
.focus img{
    height: 600px;
}
.container-body .wrap{
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
}
.container-body .info{
    background-color: black;
}
.container-body .title{
    width: 100%;
    padding: 10px 0 10px 100px;
    border-bottom: 2px solid #4d4a45 ;
}
.info-container{
    display: flex;
    margin-top: 10px;
    height: 100%;
}
.info-aside{
    width: 200px;
    height: 470px;
    background-color: #fff;
} 
::v-deep .el-tree-node__content{
    margin: 15px 0;
    color: #4d4a45;
}
.info-main{
    display: flex;
    flex-wrap: wrap;
    width: 1300px;
}
.info-main-item{
    display: flex;
    width: 540px;
    height: 220px;
    margin: 15px 15px 0 0;
    background-color: #fff;
}
.info-main-item img{
    width: 180px;
    height: 220px;
}
.info-main-item .inner{
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    width: 320px;
}
.info-main-item .inner h3{
    margin-top: 15px;
}
.info-main-item .inner span{
    margin: 5px 0;
}
.info-main-item .inner div{
    margin-top: 10px;
    padding-top: 10px ;
    width: 100%;
    border-top:1px solid #c4c5cf;
    color: #4d4a45;
}
</style>

  
  